<template>
  <p-modal
    title="Title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    width="90%"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <p-card :bordered="false" class="detail">
      <div>
        <div>基础资料</div>

        <p-form-model
          ref="detailForm"
          :model="detailForm"
          :rules="rules"
          v-bind="layout"
        >
          <p-row :gutter="24">
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="单据号"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.billno }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="线长"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.lineleader }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="应到人数"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.shouldNumber }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="实到人数"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.actualNumber }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="借入人数"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.borrowNumber }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="调出人数"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.lendNumber }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="迟到人数"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.lateNumber }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="请假人数"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.leaveNumber }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="旷工人数"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.absentNumber }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="制单人"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.makeBy }}</span>
              </p-form-model-item>
            </p-col>
            <p-col :xl="6" :lg="7" :md="8" :sm="24">
              <p-form-model-item
                has-feedback
                label="制单日期"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                prop="pass"
              >
                <span>{{ detailForm.makeDate }}</span>
              </p-form-model-item>
            </p-col>
          </p-row>
        </p-form-model>
      </div>

      <div>
        <p>出勤表</p>

        <div>
          <p-button
            :disabled="selectedRowKeys.length == 0"
            type="primary"
            @click="showBatchEditModal"
          >
            批量修改</p-button
          >
        </div>

        <p-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :scroll="tableScroll"
          :data-source="empAttendanceList"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{
            selectedRowKeys: selectedRowKeys,
            onChange: onSelectChange,
          }"
          @change="handleTableChange"
        >
          <template slot="gateStatus" slot-scope="text, record">
            <p-select :disabled="!record.isEdit" v-model="record.gateStatus">
              <p-select-option
                :value="key * 1"
                v-for="(item, key) in gateStatusKeys"
                :key="key * 1"
              >
                {{ item }}
              </p-select-option>
            </p-select>
          </template>
          <template slot="leaveType" slot-scope="text, record">
            <p-select :disabled="!record.isEdit" v-model="record.leaveType">
              <p-select-option
                :value="key * 1"
                v-for="(item, key) in leaveTypeKeys"
                :key="key * 1"
              >
                {{ item }}
              </p-select-option>
            </p-select>
          </template>

          <template slot="action" slot-scope="text, record">
            <a v-if="!record.isEdit" @click="record.isEdit = true">编辑</a>
            <a v-else @click="save(record)">保存</a>
          </template>
        </p-table>
      </div>
    </p-card>

    <p-modal
      title="Title"
      :visible="batchEditVisible"
      :confirm-loading="batchEditConfirmLoading"
      @ok="batchEdit"
      @cancel="hideBatchEditModal"
    >
      <p-form-model
        ref="batchEditForm"
        :model="batchEditForm"
        :rules="batchEditRules"
        v-bind="layout"
      >
        <p-form-model-item has-feedback label="出勤状况" prop="gateStatus">
          <p-select v-model="batchEditForm.gateStatus">
            <p-select-option
              :value="key"
              v-for="(item, key) in gateStatusKeys"
              :key="key * 1"
            >
              {{ item }}
            </p-select-option>
          </p-select>
        </p-form-model-item>

        <p-form-model-item has-feedback label="起始时间" prop="startTime">
          <p-date-picker
            show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            placeholder="起始时间"
            v-model="batchEditForm.startTime"
            @change="onChange"
            @ok="onOk"
          />
        </p-form-model-item>
        <p-form-model-item has-feedback label="终止时间" prop="endTime">
          <p-date-picker
            show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            placeholder="终止时间"
            v-model="batchEditForm.endTime"
            @change="onChange"
            @ok="onOk"
          />
        </p-form-model-item>
      </p-form-model>
    </p-modal>
  </p-modal>
</template>

<script type="text/javascript">
import { postAction, getAction, deleteAction, putAction } from "@/api/manage";
import { ajaxGetDictItems } from "@/api/api";
import { getDictItemsArr, timestampToDatetime } from "@/utils/util";

export default {
  name: "PeopleInfoDetailModal",
  props: {
    attendanceSignId: String,
    empno: String,
  },
  data() {
    return {
      visible: false,
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 18,
      },
      detailForm: {},
      beforeEditDetailForm: {},
      // 班组信息列表
      classLineInfoList: [],
      // 考勤状态字典
      gateStatusKeys: {},
      // 请假类型字典
      leaveTypeKeys: {},
      /* table选中keys */
      selectedRowKeys: [],
      /* table加载状态 */
      loading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      // 员工出勤列表
      empAttendanceList: [],
      // 表头
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: (t, r, index) => {
            return parseInt(index) + 1;
          },
        },
        {
          title: "员工姓名",
          align: "center",
          dataIndex: "empname",
        },
        {
          title: "车间",
          align: "center",
          dataIndex: "workroomname",
        },
        {
          title: "线体",
          align: "center",
          dataIndex: "linename",
        },
        {
          title: "班组",
          align: "center",
          dataIndex: "classname",
        },
        {
          title: "出勤情况",
          align: "center",
          dataIndex: "gateStatus",
          scopedSlots: { customRender: "gateStatus" },
          witdh: 150,
        },
        {
          title: "请假类型",
          align: "center",
          dataIndex: "leaveType",
          scopedSlots: { customRender: "leaveType" },
          width: 160,
        },
        {
          title: "起始时间",
          align: "center",
          dataIndex: "startTime",
          customRender: (t, r, index) => {
            return timestampToDatetime(t);
          },
        },
        {
          title: "终止时间",
          align: "center",
          dataIndex: "endTime",
          customRender: (t, r, index) => {
            return timestampToDatetime(t);
          },
        },
        {
          title: "时长(H)",
          align: "center",
          dataIndex: "hours",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
      batchEditVisible: false,
      batchEditConfirmLoading: false,
      batchEditForm: {
        gateStatus: "",
        startTime: "",
        endTime: "",
      },
      batchEditRules: {
        gateStatus: [
          { required: true, message: "请选择考勤状态", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请输选择起始时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请输选择结束时间", trigger: "blur" },
        ],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
      url: {
        list: "/mes-manpower/mesHrAttendanceSign", // 考勤表信息 
        empAttendanceList: "/mes-manpower/mesHrEmpGate/list", // 员工出勤表
        empAttendanceListUpdate: "/mes-manpower/mesHrEmpGate/updateBatch", // 批量修改员工出勤情况，
        empAttendanceUpdate: "/mes-manpower/mesHrEmpGate", // 修改单个员工出勤情况
      },
    };
  },

  watch: {
    attendanceSignId(newValue, oldValue) {
      Object.assign(this.detailForm, this.$options.data().detailForm);
    },
  },
  computed: {
    tableScroll() {
      if (this.columns.length > 13) {
        return { x: this.columns.length * 150 - 450 };
      }
    },
  },
  mounted() {},
  methods: {
    // 获取数字字典
    getAjaxGetDictItems() {
      const arr = [
        { code: "mes_gate_status", key: "gateStatusKeys" },
        { code: "mes_leave_type", key: "leaveTypeKeys" },
      ];
      getDictItemsArr(this, arr);
    },

    // 获取员工考勤列表
    getEmpAttendanceList() {
      const params = {
        lineno: this.empno,
      };
      getAction(this.url.empAttendanceList, params).then((res) => {
        if (res.success) {
          this.empAttendanceList = res.data.records.map((ele) => {
            ele.isEdit = false;
            return ele;
          });
        }
      });
    },

    // 获取考勤信息
    getAttendanceSignInfo() {
      getAction(this.url.list + "/" + this.attendanceSignId).then((res) => {
        if (res.success) {
          res.data.makeDate = timestampToDatetime(res.data.makeDate);
          res.data.workdate = timestampToDatetime(res.data.workdate);
          this.detailForm = res.data;
        }
      });
    },    

    // 显示批量编辑弹窗
    showBatchEditModal() {
      this.batchEditVisible = true;
    },

    // 关闭批量编辑弹窗
    hideBatchEditModal() {
      this.$refs.batchEditForm.resetFields();
      this.batchEditVisible = false;
      this.batchEditConfirmLoading = false;
    },

    // 显示本弹窗
    showModal() {
      this.visible = true;
      this.getAttendanceSignInfo();
      this.getEmpAttendanceList();
      JSON.stringify(this.gateStatusKeys) == "{}" && this.getAjaxGetDictItems();
    },

    // 保存单个修改员工出勤
    save(record) {
      const { gateStatus, leaveType, id } = record;
      const params = {
        gateStatus,
        leaveType,
        id,
      };
      putAction(this.url.empAttendanceUpdate, params).then((res) => {
        if (res.success) {
          this.hideBatchEditModal();
          this.getEmpAttendanceList();
          this.getAttendanceSignInfo();
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 批量修改出勤
    batchEdit() {
      this.$refs.batchEditForm.validate((valid) => {
        if (valid) {
          this.batchEditConfirmLoading = true;
          const params = {
            ids: this.selectedRowKeys,
            mesAttendanceSignId: this.ttendanceSignId,
            workdate: this.detailForm.workdate,
            ...this.batchEditForm,
          };
          putAction(this.url.empAttendanceListUpdate, params).then((res) => {
            if (res.success) {
              this.hideBatchEditModal();
              this.getEmpAttendanceList();
              this.getAttendanceSignInfo();
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleOk() {
      this.visible = false
    },

    handleCancel(e) {
      this.visible = false;
    },

    // table选中改变
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },

    // table变化
    handleTableChange(pagination, filters, sorter) {
      this.ipagination = pagination;
      this.loadData();
    },

  },
  components: {},
};
</script>


<style lang="less" scoped>
</style>
